<template>
    <div class="Box">
        <div class="Title">
            江苏省人社厅技能大赛
            <div class="judgeOperation">
                <div class="judge" @click="isLogout"></div>
                <div v-if="islogout" @click="logout" class="logout">退出</div>
                <span class="judgeName">裁判001</span>
            </div>
        </div>
        <div class="content">
            <div class="mainBody">
                <div class="left">
                    <div>
                        <div class="titBox" :class="SelectedId == 1 ? 'titBox2' : ''" @click="Gameanagement(1)">
                            <img src="/public/images/比赛管理/比赛管理1.png" alt="" v-if="SelectedId == 1">
                            <img src="/public/images/比赛管理/比赛管理.png" alt="" v-else><span>比赛管理</span>
                            <img src="/public/images/比赛管理/箭头-右1.png" alt="" class="ArrowIcon2" v-if="SelectedId == 1">
                            <img src="/public/images/比赛管理/箭头-右.png" alt="" class="ArrowIcon" v-else>
                        </div>
                        <!-- <div class="liBox"  :class="SelectedId == 1 ? '' : 'liBox2'">
                            <div class="li" v-for="item in comControl" :key="item.key">
                                {{ item.name }}
                            </div>
                        </div> -->
                        <div class="titBox" :class="SelectedId == 2 ? 'titBox2' : ''" @click="Gameanagement(2)">
                            <img src="/public/images/比赛管理/用户管理1.png" alt="" v-if="SelectedId == 1">
                            <img src="/public/images/比赛管理/用户管理.png" alt="" v-else><span>用户管理</span>
                            <img src="/public/images/比赛管理/箭头-下（1）.png" alt="" class="ArrowIcon2" v-if="SelectedId == 2">
                            <img src="/public/images/比赛管理/箭头-右.png" alt="" class="ArrowIcon" v-else>
                        </div>
                        <div class="liBox" :class="SelectedId == 2 ? '' : 'liBox2'">
                            <div class="li" :class="selectPage == item.key ? 'liselect' : ''"
                                v-for="item in comControlUser" :key="item.key" @click="selectPageFn(item.key)">
                                {{ item.name }}
                            </div>
                        </div>
                    </div>
                </div>
                <div class="right">
                    <div v-if="selectPage == '比赛管理'">
                        <div v-if="!isCreatMatch">
                            <div class="matchConduct">
                                <div class="search">
                                    <input class="searchIpt" v-model="searchIptValue" type="text">
                                    <div class="searchBtn" @click="searchContest">
                                        <img src="/public/images/搜索.png" alt="">
                                    </div>
                                </div>
                                <div>
                                    <a-button class="operationBtn" type="primary" @click="createPage">创建比赛</a-button>
                                </div>
                            </div>

                            <a-table :columns="MatchControlColumns" :data-source="MatchControlData"
                                :pagination="pagination">
                                <template #bodyCell="{ column, record }">
                                    <template v-if="column.key === 'operation'">
                                        <div class="operationTd">
                                            <img src="/public/images/比赛管理/详情.png" @click="particulars(record)" alt="">
                                            <img src="/public/images/比赛管理/编辑.png" @click="compile(record)" alt="">
                                            <img src="/public/images/比赛管理/发布.png" @click="publish(record)" alt="">
                                            <img src="/public/images/比赛管理/删除.png" @click="remove(record)" alt="">
                                            <img src="/public/images/比赛管理/结束.png" @click="finish(record)" alt="">
                                        </div>
                                    </template>
                                </template>
                            </a-table>
                        </div>
                        <div v-else class="creatMatch">
                            <div style="display: flex;">
                                <h2>创建比赛</h2>
                                <a-button type="text" class="confirmCreate" @click="onSubmit">确定</a-button>
                                <a-button type="primary" class="callBack" @click="Return">返回</a-button>
                            </div>
                            <a-form ref="formRef" :model="formData" :rules="rules">
                                <a-form-item label="比赛名称" name='matchName'>
                                    <a-input v-model:value="formData.matchName" placeholder="请输入比赛名称" />
                                </a-form-item>
                                <a-form-item label="开始时间" name='startTime'>
                                    <a-date-picker v-model:value="formData.startTime" format="YYYY-MM-DD HH:mm:ss"
                                        :disabled-date="disabledDate" :disabled-time="disabledDateTime"
                                        :show-time="{ defaultValue: dayjs('00:00:00', 'HH:mm:ss') }"
                                        placeholder="请选择开始时间" style="width: 100%;" />
                                </a-form-item>
                                <a-form-item label="结束时间" name='endTime'>
                                    <a-date-picker v-model:value="formData.endTime" format="YYYY-MM-DD HH:mm:ss"
                                        :disabled-date="disabledDate" :disabled-time="disabledDateTime"
                                        :show-time="{ defaultValue: dayjs('00:00:00', 'HH:mm:ss') }"
                                        placeholder="请选择结束时间" style="width: 100%;" />
                                </a-form-item>
                                <a-form-item label="专家组长" name="expertGroupLeader">
                                    <a-select v-model:value="formData.expertGroupLeader" placeholder="请选择专家组长">
                                        <a-select-option value="shanghai">专家一</a-select-option>
                                        <a-select-option value="beijing">专家二</a-select-option>
                                    </a-select>
                                </a-form-item>
                                <a-form-item label="裁判组长" name="chiefUmpire">
                                    <a-select v-model:value="formData.chiefUmpire" placeholder="请选择裁判组长">
                                        <a-select-option value="caipanyi">裁判一</a-select-option>
                                        <a-select-option value="caipaner">裁判二</a-select-option>
                                    </a-select>
                                </a-form-item>
                                <span style="position: absolute;top: 557px;color: red;font-size: 16px;">*</span>
                                <a-form-item label="评分裁判" name="gradingJudge" style="margin-left: 11px;">
                                    <div :class="isShowList ? 'selectIptTrue' : isSuccess ? 'selectIpt' : 'selectIptFalse'"
                                        @click="showList">
                                        <span v-if="selectedList.length < 1">请选择评分裁判</span>
                                        <div style="display: flex;" v-else>
                                            <div class="haveChosen" v-for="item in selectedList" :key="item.value">
                                                {{ item.value }}
                                                <span @click.stop="deleteSelect(item.value)">×</span>
                                            </div>
                                        </div>
                                    </div>
                                    <div v-if="isShowList" class="selectBox">
                                        <div class="selectList">
                                            <div class="ListBox" v-for="item in options" :key="item.value">
                                                <a-checkbox style="font-size: 16px;" v-model:checked="item.check">
                                                    {{ item.value }}</a-checkbox>
                                            </div>
                                        </div>
                                        <div class="selectBtn">
                                            <a-button type="text" class="allSelect"
                                                @click.stop="allSelectFn">全选</a-button>
                                            <a-button type="text" class="cancelSelect"
                                                @click="cancelSelectFn">取消选择</a-button>
                                            <a-button class="confirmSelect" @click="confirmSelectFn">确定</a-button>
                                        </div>
                                    </div>
                                </a-form-item>
                                <span v-if="!isSuccess"
                                    style="position: absolute;color: #ff4d4f; top: 595px;left: 434px;">请选择评分裁判</span>
                                <a-form-item label="比赛选手" name="racer">
                                    <a-select v-model:value="formData.racer" placeholder="请选择比赛选手">
                                        <a-select-option value="pingfenyi">比赛选手一</a-select-option>
                                        <a-select-option value="pingfener">比赛选手二</a-select-option>
                                    </a-select>
                                </a-form-item>
                                <a-form-item label="主办单位" name='sponsor'>
                                    <a-input v-model:value="formData.sponsor" placeholder="请输入主办单位" />
                                </a-form-item>
                                <a-form-item label="协办单位" name='co_organizer'>
                                    <a-input v-model:value="formData.co_organizer" placeholder="请输入协办单位" />
                                </a-form-item>
                                <a-form-item label="赞助单位" name='supportingAgency'>
                                    <a-input v-model:value="formData.supportingAgency" placeholder="请输入赞助单位" />
                                </a-form-item>
                                <a-form-item label="技术支持" name='technicalSupport'>
                                    <a-input v-model:value="formData.technicalSupport" placeholder="请输入技术支持" />
                                </a-form-item>
                            </a-form>
                        </div>
                    </div>
                    <div v-if="selectPage == '赛季管理员'">
                        <div class="matchConduct">
                            <div class="search">
                                <input placeholder="搜索" v-model="searchValue" class="searchIpt" type="text">
                                <div class="searchBtn" @click="searchUser">
                                    <img src="/public/images/搜索.png" alt="">
                                </div>
                            </div>
                            <div>
                                <a-button class="operationBtn" type="primary">导入用户</a-button>
                                <a-button class="operationBtn" type="primary">下载模板</a-button>
                                <a-button class="operationBtn" type="primary" @click="createUser">创建用户</a-button>
                            </div>
                        </div>
                        <a-table :columns="SeasonManagerColumns" :data-source="SeasonManagerlData"
                            :pagination="pagination">
                            <template #bodyCell="{ column, record }">
                                <template v-if="column.key === 'operation'">
                                    <div class="operationTd">
                                        <img v-if="hireState == 1" src="/public/images/赛项管理员/启用.png" alt="">
                                        <img v-if="hireState == 2" src="/public/images/赛项管理员/聘用.png" alt="">
                                        <img v-if="hireState == 3" src="/public/images/赛项管理员/解聘.png" alt="">
                                        <img src="/public/images/赛项管理员/编辑.png" @click="edit(record)" alt="">
                                        <a-popconfirm title="是否确认删除此条数据" ok-text="确认" cancel-text="取消"
                                            @confirm="deleteData(record)">
                                            <img src="/public/images/赛项管理员/删除.png">
                                        </a-popconfirm>
                                        <!-- <img src="/public/images/赛项管理员/删除.png" @click="deleteData(record)" alt=""> -->
                                        <img src="/public/images/赛项管理员/重置.png" @click="reset(record)" alt="">
                                    </div>
                                </template>
                            </template>
                        </a-table>
                    </div>
                    <div v-if="selectPage == '专家组长2'">22222</div>
                    <div v-if="selectPage == '裁判组长3'">33333</div>
                    <div v-if="selectPage == '评分裁判4'">44444</div>
                    <div v-if="selectPage == '参赛选手5'">55555</div>
                </div>
            </div>
        </div>
    </div>
    <div id="box" v-if="isMaskVisible"></div>
    <div class="PopBox" v-if="isEdit">
        <p>编辑</p>
        <div class="userName">用户名<input type="text" class="popIpt" v-model="NewUserName"></div>
        <div class="btn">
            <button class="cancelBtn" @click="cancel">取消</button>
            <button class="confirmBtn" @click="editConfirm">确认</button>
        </div>
    </div>
    <div class="PopBox" style="height: 538px;" v-if="isCreate">
        <p>创建用户</p>
        <div class="userName">用户名<input class="popIpt" v-model="setUserNameVal" type="text"></div>
        <div class="setPassword">输入密码<input class="popIpt" v-model="setPassWordVal" type="text"></div>
        <div class="btn2">
            <button class="cancelBtn" @click="cancel">取消</button>
            <button class="confirmBtn" @click="createConfirm">确认</button>
        </div>
    </div>
    <div class="PopBox" style="height: 538px;" v-if="isReset">
        <p>重置密码</p>
        <div style="font-size: 24px;margin-top: 119px;">输入旧密码<input v-model="oldPassword" class="popIpt" type="text">
        </div>
        <div style="font-size: 24px;margin-top: 25px;">输入新密码<input v-model="newPassword" class="popIpt" type="text">
        </div>
        <div class="ConfirmPassword">确认新密码<input v-model="newAgainPassword" class="popIpt" type="text"></div>
        <div class="btn3">
            <button class="cancelBtn" @click="cancel">取消</button>
            <button class="confirmBtn" @click="resetConfirm">确认</button>
        </div>
    </div>
    <div class="PopBox" v-if="isPublish">
        <p class="popTitle">是否确认发布此比赛</p>
        <div class="popBtn">
            <button class="cancelBtn" @click="cancel">取消</button>
            <button class="confirmBtn" @click="publishConfirm">确认</button>
        </div>
    </div>
    <div class="PopBox" v-if="isRemove">
        <p class="popTitle">是否确认删除此比赛</p>
        <div class="popBtn">
            <button class="cancelBtn" @click="cancel">取消</button>
            <button class="confirmBtn" @click="removeConfirm">确认</button>
        </div>
    </div>
    <div class="PopBox" v-if="isFinish">
        <p class="popTitle">是否确认结束此比赛</p>
        <div class="popBtn">
            <button class="cancelBtn" @click="cancel">取消</button>
            <button class="confirmBtn" @click="finishConfirm">确认</button>
        </div>
    </div>
</template>
<script setup lang='ts'>
import dayjs, { Dayjs } from 'dayjs';
import { ref, toRaw } from 'vue';
import type { Rule } from 'ant-design-vue/es/form';
import type { CascaderProps } from 'ant-design-vue';
import { message } from 'ant-design-vue';
import { useRouter } from 'vue-router'
const router = useRouter()
const islogout = ref(false)
const isCreatMatch = ref(false)
let SelectedId = ref(1)
let selectPage = ref('比赛管理')
const isEdit = ref(false)
const isCreate = ref(false)
const isReset = ref(false)
const isMaskVisible = ref(false)
// 当前行的信息
const currentInfo = ref()
const NewUserName = ref('')
const setUserNameVal = ref('')
const setPassWordVal = ref('')
const oldPassword = ref('')
const newPassword = ref('')
const newAgainPassword = ref('')
const searchValue = ref('')
const searchIptValue = ref('')
// let mask = document.querySelector('#box') as HTMLElement;
function isLogout() {
    islogout.value = !islogout.value
}
function logout() {
    islogout.value = false
    router.push('/')
}
let comControl = ref([
    // {key:'专家组长',name:'专家组长'},
    // {key:'裁判组长',name:'裁判组长'},
    // {key:'评分裁判',name:'评分裁判'},
    // {key:'参赛选手',name:'参赛选手'},
])
let comControlUser = ref([
    { key: '赛季管理员', name: '赛季管理员' },
    { key: '专家组长2', name: '专家组长' },
    { key: '裁判组长3', name: '裁判组长' },
    { key: '评分裁判4', name: '评分裁判' },
    { key: '参赛选手5', name: '参赛选手' },
])
function Gameanagement(value: any) {
    SelectedId.value = value
    // selectPage.value = ''
    selectPage.value = '比赛管理'
}
function selectPageFn(value: any) {
    selectPage.value = value
}

const MatchControlColumns = [
    {
        title: '序号',
        dataIndex: 'Id',
        key: 'Id',
        width: '20%',
    },
    {
        title: '比赛',
        dataIndex: 'name',
        key: 'name',
        width: '20%',
    },
    {
        title: '创建时间',
        dataIndex: 'createTime',
        key: 'createTime',
        width: '20%',
    },
    {
        title: '状态',
        key: 'state',
        dataIndex: 'state',
        width: '20%',
    },
    {
        title: '操作',
        key: 'operation',
        width: '20%',
    },
];
// const allMatchControlData = ref([
//     {
//         id: 0,
//         name: string,
//         createTime: string,
//         status: 0,
//         questionCount: 0,
//         limitStartTime: string,
//         limitEndTime: string,
//         paperFrameId: string,
//         createUser: 0,
//         publishTime: string,
//         passScore: 0,
//         sponsor: string,
//         coorganizer: string,
//         support: string,
//         technical: string,
//         questionItemMess: true,
//         questionItem: true,
//         cheat: true,
//         maxCheatCount: 0,
//         score: 0,
//         matchUserList: [
//             {
//                 id: 0,
//                 userId: 0,
//                 examPaperId: 0
//             }
//         ],
//         matchProfessList: [
//             {
//                 id: 0,
//                 userId: 0,
//                 examPaperId: 0
//             }
//         ],
//         matchRefereeList: [
//             {
//                 id: 0,
//                 userId: 0,
//                 examPaperId: 0
//             }
//         ],
//         matchScorerList: [
//             {
//                 id: 0,
//                 userId: 0,
//                 examPaperId: 0
//             }
//         ]
//     }
// ])
const MatchControlData = ref([
    {
        Id: 1,  //Id 
        name: '苏州市职业技能技术大赛', // 比赛名称
        createTime: '2024-08-18 17:56:36',  // 创建时间
        state: '已结束',  // 状态
        questionCount: 0,  // 
        limitStartTime: undefined, // 开始时间
        limitEndTime: undefined,  // 结束时间
        paperFrameId: '',
        createUser: 0,  // 创建用户
        publishTime: '',  // 发布时间
        passScore: 0,
        sponsor: '', // 主办单位
        coorganizer: '',  // 协办单位
        support: '',  // 赞助单位
        technical: '',  // 技术支持
        questionItemMess: true,
        questionItem: true,
        cheat: true,
        maxCheatCount: 0,  // 
        score: 0,  // 总分
        matchUserList: undefined,  // 比赛选手
        matchProfessList: undefined,  // 专家组长
        matchRefereeList: undefined,  // 裁判组长
        matchScorerList: undefined,  // 评分裁判
        // matchUserList: [
        //     {
        //         id: 0,
        //         userId: 0,
        //         examPaperId: 0
        //     }
        // ],
        // matchProfessList: [
        //     {
        //         id: 0,
        //         userId: 0,
        //         examPaperId: 0
        //     }
        // ],
        // matchRefereeList: [
        //     {
        //         id: 0,
        //         userId: 0,
        //         examPaperId: 0
        //     }
        // ],
        // matchScorerList: [
        //     {
        //         id: 0,
        //         userId: 0,
        //         examPaperId: 0
        //     }
        // ]
    },
    {
        key: '2',
        Id: '2',
        name: '江苏省汽车维修技能省赛',
        createTime: '2024-08-20 18:06:08',
        state: '进行中',
    },
    {
        key: '3',
        Id: '3',
        name: '中国技能大赛汽车维修赛预选赛',
        createTime: '2024-08-22 13:36:56',
        state: '未发布',
    },
    {
        key: '4',
        Id: '4',
        name: '苏州市汽车行业技能大赛',
        createTime: '2024-08-26 14:26:38',
        state: '未组卷',
    },
    {
        key: '5',
        Id: '5',
        name: '苏州市汽车行业技能大赛',
        createTime: '2024-08-26 14:26:38',
        state: '未组卷',
    },
    {
        key: '6',
        Id: '6',
        name: '苏州市汽车行业技能大赛',
        createTime: '2024-08-26 14:26:38',
        state: '未组卷',
    },
    {
        key: '7',
        Id: '7',
        name: '苏州市汽车行业技能大赛',
        createTime: '2024-08-26 14:26:38',
        state: '未组卷',
    },
    {
        key: '8',
        Id: '8',
        name: '苏州市汽车行业技能大赛',
        createTime: '2024-08-26 14:26:38',
        state: '未组卷',
    },
    {
        key: '9',
        Id: '9',
        name: '苏州市汽车行业技能大赛',
        createTime: '2024-08-26 14:26:38',
        state: '未组卷',
    },
]);
const hireState = ref(1)
const SeasonManagerColumns = [
    {
        title: '序号',
        dataIndex: 'Id',
        key: 'Id',
        width: '20%',
    },
    {
        title: '用户名',
        dataIndex: 'userName',
        key: 'userName',
        width: '20%',
    },
    {
        title: '名称',
        dataIndex: 'name',
        key: 'name',
        width: '20%',
    },
    {
        title: '创建时间',
        key: 'createTime',
        dataIndex: 'createTime',
        width: '20%',
    },
    {
        title: '操作',
        key: 'operation',
        width: '20%',
    },
];
const SeasonManagerlData = ref([
    {
        key: 1,
        Id: 1,
        userName: '001',
        name: '管理员',
        createTime: '2024-08-18 17:56:36',
        password: '100'
    },
    {
        key: 2,
        Id: 2,
        userName: '002',
        name: '管理员',
        createTime: '2024-08-20 18:06:08',
        password: '200'
    },
    {
        key: 3,
        Id: 3,
        userName: '003',
        name: '管理员',
        createTime: '2024-08-22 13:36:56',
        password: '300'
    },
    {
        key: 4,
        Id: 4,
        userName: '004',
        name: '管理员',
        createTime: '2024-08-26 14:26:38',
        password: '400'
    },
    {
        key: 5,
        Id: 5,
        userName: '005',
        name: '管理员',
        createTime: '2024-08-26 14:26:38',
        password: '500'
    },
    {
        key: 6,
        Id: 6,
        userName: '006',
        name: '管理员',
        createTime: '2024-08-26 14:26:38',
        password: '600'
    },
    {
        key: 7,
        Id: 7,
        userName: '007',
        name: '管理员',
        createTime: '2024-08-26 14:26:38',
        password: '700'
    },
    {
        key: 8,
        Id: 8,
        userName: '008',
        name: '管理员',
        createTime: '2024-08-26 14:26:38',
        password: '800'
    },
    {
        key: 9,
        Id: 9,
        userName: '009',
        name: '管理员',
        createTime: '2024-08-26 14:26:38',
        password: '900'
    },
]);
function edit(value: any) {
    console.log('编辑的值', value);
    currentInfo.value = value
    isEdit.value = true
    isCreate.value = false
    isReset.value = false
    isMaskVisible.value = true
}
function createUser() {
    isEdit.value = false
    isCreate.value = true
    isReset.value = false
    isMaskVisible.value = true
}
function deleteData(value: any) {
    SeasonManagerlData.value = SeasonManagerlData.value.filter((item: any) => item.key != value.key)
}
const changePassword = ref()
function reset(value: any) {
    changePassword.value = value
    isEdit.value = false
    isCreate.value = false
    isReset.value = true
    isMaskVisible.value = true

}
function cancel() {
    isEdit.value = false
    isCreate.value = false
    isReset.value = false
    isMaskVisible.value = false
    NewUserName.value = ''
    setUserNameVal.value = ''
    setPassWordVal.value = ''
    oldPassword.value = ''
    newPassword.value = ''
    newAgainPassword.value = ''
    isPublish.value = false
    isRemove.value = false
    isFinish.value = false
}
function editConfirm() {
    isEdit.value = false
    isCreate.value = false
    isReset.value = false
    isMaskVisible.value = false
    SeasonManagerlData.value.forEach(element => {
        if (element.key == currentInfo.value.key) {
            element.userName = NewUserName.value
        }
    });
}
function createConfirm() {
    isEdit.value = false
    isCreate.value = false
    isReset.value = false
    isMaskVisible.value = false
    let stamp = new Date().getTime() + 8 * 60 * 60 * 1000;
    let nowTime = new Date(stamp).toISOString().replace(/T/, ' ').replace(/\..+/, '').substring(0, 19);
    let newUser = {
        key: SeasonManagerlData.value[SeasonManagerlData.value.length - 1].key + 1,
        Id: SeasonManagerlData.value[SeasonManagerlData.value.length - 1].key + 1,
        userName: setUserNameVal.value,
        name: `新用户${SeasonManagerlData.value[SeasonManagerlData.value.length - 1].key + 1}`,
        createTime: nowTime,
        password: `${SeasonManagerlData.value[SeasonManagerlData.value.length - 1].key + 1}00`,
    }
    SeasonManagerlData.value.push(newUser)
}
function resetConfirm() {
    if (oldPassword.value == '') {
        message.warning('旧密码不能为空');
    }
    else if (oldPassword.value != changePassword.value.password) {
        message.warning('旧密码不正确');
    }
    else if (newPassword.value == '') {
        message.warning('新密码不能为空');
    }
    else if (newPassword.value == changePassword.value.password) {
        message.warning('新密码不可与旧密码一致');
    }
    else if (newAgainPassword.value == '') {
        message.warning('请再次输入新密码');
    }
    else if (newAgainPassword.value != newPassword.value) {
        message.warning('两次输入的新密码不一样');
    }
    else {
        isEdit.value = false
        isCreate.value = false
        isReset.value = false
        isMaskVisible.value = false
        SeasonManagerlData.value.forEach(element => {
            if (element.key == changePassword.value.key) {
                element.password = newPassword.value
            }
        });
    }
}
function searchContest() {
    let searchList: any = []
    MatchControlData.value.forEach(element => {
        if (element.name.includes(searchIptValue.value)) {
            searchList.push(element)
        }
    });
    MatchControlData.value = searchList
}
function searchUser() {
    let searchList: any = []
    SeasonManagerlData.value.forEach(element => {
        if (element.userName.includes(searchValue.value)) {
            searchList.push(element)
        }
    });
    SeasonManagerlData.value = searchList
}
const pagination = {
    pageSize: 10,
    showQuickJumper: true,
    locale: {
        jump_to: '前往',
        page: '页',
    },
    // showQuickJumper:{ goButton: <Button className='go-page'>确定</Button> }
}
const range = (start: number, end: number) => {
    const result = [];

    for (let i = start; i < end; i++) {
        result.push(i);
    }

    return result;
};
const disabledDate = (current: Dayjs) => {
    return current && current < dayjs().endOf('day');
};

const disabledDateTime = () => {
    return {
        disabledHours: () => range(0, 24).splice(4, 20),
        disabledMinutes: () => range(30, 60),
        disabledSeconds: () => [55, 56],
    };
};
const formData = ref({
    matchName: '',
    startTime: undefined,
    endTime: undefined,
    expertGroupLeader: undefined,
    chiefUmpire: undefined,
    gradingJudge: undefined,
    racer: undefined,
    sponsor: '',
    co_organizer: '',
    supportingAgency: '',
    technicalSupport: '',
});
const rules: Record<string, Rule[]> = {
    matchName: [
        { required: true, message: '请输入比赛名称', trigger: 'change' },
        { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
    ],
    startTime: [{ required: true, message: '请选择比赛开始时间', trigger: 'change', type: 'object' }],
    endTime: [{ required: true, message: '请选择比赛结束时间', trigger: 'change', type: 'object' }],
    expertGroupLeader: [{ required: true, message: '请选择专家组长', trigger: 'blur' }],
    chiefUmpire: [{ required: true, message: '请选择裁判组长', trigger: 'blur' }],
    // gradingJudge: [{ required: true, message: '请选择评分裁判', trigger: 'blur' }],
    gradingJudge: [{ required: false, message: '请选择评分裁判', trigger: 'blur' }],
    racer: [{ required: true, message: '请选择比赛选手', trigger: 'blur' }],
    sponsor: [{ required: true, message: '请输入主办单位', trigger: 'blur' }],
    co_organizer: [{ required: true, message: '请输入协办单位', trigger: 'blur' }],
    supportingAgency: [{ required: true, message: '请输入赞助单位', trigger: 'blur' }],
    technicalSupport: [{ required: true, message: '请输入技术支持', trigger: 'blur' }],
};

const formRef = ref();
let isSuccess = ref(true)
let newFormData = ref({})
let newSelectList = ref([])
function onSubmit() {
    formRef.value.validate()
        .then(() => {
            // console.log('values', formData, toRaw(formData));
            console.log('selectedList.value', selectedList.value);

            if (selectedList.value.length == 0) {
                message.warning('没有');
                isSuccess.value = false
            } else {
                message.warning('有');
                console.log('selectedList.value.length', selectedList.value.length);

                isSuccess.value = true
            }
            if (detailVal.value) {
                let newCreateMatch = {
                    Id: Number(MatchControlData.value[MatchControlData.value.length - 1].Id) + 1,  //Id 
                    name: formData.value.matchName, // 比赛名称
                    createTime: '2024-08-18 17:56:36',  // 创建时间
                    state: '已创建',  // 状态
                    questionCount: 0,  // 
                    limitStartTime: formData.value.startTime, // 开始时间
                    limitEndTime: formData.value.endTime,  // 结束时间
                    paperFrameId: '',
                    createUser: 0,  // 创建用户
                    publishTime: '',  // 发布时间
                    passScore: 0,
                    sponsor: formData.value.sponsor, // 主办单位
                    coorganizer: formData.value.co_organizer,  // 协办单位
                    support: formData.value.supportingAgency,  // 赞助单位
                    technical: formData.value.technicalSupport,  // 技术支持
                    questionItemMess: true,
                    questionItem: true,
                    cheat: true,
                    maxCheatCount: 0,  // 
                    score: 0,  // 总分
                    matchUserList: formData.value.racer,  // 比赛选手
                    matchProfessList: formData.value.expertGroupLeader,  // 专家组长
                    matchRefereeList: formData.value.chiefUmpire,  // 裁判组长
                    matchScorerList: '',  // 评分裁判
                }
            } else {
                let newCreateMatch = {
                    Id: detailVal.value.Id,  //Id 
                    name: formData.value.matchName, // 比赛名称
                    createTime: '2024-08-18 17:56:36',  // 创建时间
                    state: '已创建',  // 状态
                    questionCount: 0,  // 
                    limitStartTime: formData.value.startTime, // 开始时间
                    limitEndTime: formData.value.endTime,  // 结束时间
                    paperFrameId: '',
                    createUser: 0,  // 创建用户
                    publishTime: '',  // 发布时间
                    passScore: 0,
                    sponsor: formData.value.sponsor, // 主办单位
                    coorganizer: formData.value.co_organizer,  // 协办单位
                    support: formData.value.supportingAgency,  // 赞助单位
                    technical: formData.value.technicalSupport,  // 技术支持
                    questionItemMess: true,
                    questionItem: true,
                    cheat: true,
                    maxCheatCount: 0,  // 
                    score: 0,  // 总分
                    matchUserList: formData.value.racer,  // 比赛选手
                    matchProfessList: formData.value.expertGroupLeader,  // 专家组长
                    matchRefereeList: formData.value.chiefUmpire,  // 裁判组长
                    matchScorerList: '',  // 评分裁判
                }
            }

            MatchControlData.value.forEach(element => {
                if (element.Id == newCreateMatch.Id) {

                }
                else {
                    MatchControlData.value.push(newCreateMatch)
                }
            });
            console.log('MatchControlData.value', MatchControlData.value);


            isCreatMatch.value = false

            // newFormData.value = {
            //     matchName: formData.value.matchName,
            //     startTime: formData.value.startTime,
            //     endTime: formData.value.endTime,
            //     expertGroupLeader: formData.value.expertGroupLeader,
            //     chiefUmpire: formData.value.chiefUmpire,
            //     racer: formData.value.racer,
            //     sponsor: formData.value.sponsor,
            //     co_organizer: formData.value.co_organizer,
            //     supportingAgency: formData.value.supportingAgency,
            //     technicalSupport: formData.value.technicalSupport,
            // }
            // newFormData.value = formData.value
            newSelectList.value = selectedList.value
            console.log('newFormData', newFormData.value, selectedList.value);

            selectedList.value = []
            // formData.value = {
            //     matchName: '',
            //     startTime: undefined,
            //     endTime: undefined,
            //     expertGroupLeader: undefined,
            //     chiefUmpire: undefined,
            //     gradingJudge: undefined,
            //     racer: undefined,
            //     sponsor: '',
            //     co_organizer: '',
            //     supportingAgency: '',
            //     technicalSupport: '',
            // }
            formData.value = {
                matchName: '',
                startTime: undefined,
                endTime: undefined,
                expertGroupLeader: undefined,
                chiefUmpire: undefined,
                gradingJudge: undefined,
                racer: undefined,
                sponsor: '',
                co_organizer: '',
                supportingAgency: '',
                technicalSupport: '',
            }
        })
        .catch((error: any) => {
            console.log('error', error);
            console.log('values', formData, toRaw(formData));
            if (selectedList.value.length == 0) {
                isSuccess.value = false
            } else {
                isSuccess.value = true
            }
        });
}
const resetForm = () => {
    formRef.value.resetFields();
};
function createPage() {
    isCreatMatch.value = true
}
function Return() {
    isCreatMatch.value = false
}
// 评分裁判
const options = ref([
    {
        value: '余其文',
        check: false,
    },
    {
        value: '刘成凯',
        check: false,
    },
    {
        value: '张青',
        check: false,
    },
    {
        value: '邹韶轩',
        check: false,
    },
    {
        value: 'admin',
        check: false,
    },
    {
        value: '曹海珍',
        check: false,
    },
    {
        value: '陈琳',
        check: false,
    },
    {
        value: '陈宇恒',
        check: false,
    },
    {
        value: '方刚',
        check: false,
    },
    {
        value: '冯轩',
        check: false,
    },
    {
        value: '小一',
        check: false,
    },
    {
        value: '小二',
        check: false,
    },
    {
        value: '小三',
        check: false,
    },
    {
        value: '小四',
        check: false,
    },
    {
        value: '小五',
        check: false,
    },
]);
let isShowList = ref(false)
function showList() {
    isShowList.value = true
}
let selectedList = ref([])
function allSelectFn() {
    options.value.forEach((element: any) => {
        element.check = true
    });
}
function cancelSelectFn() {
    options.value.forEach((element: any) => {
        element.check = false
    });
}
function confirmSelectFn() {
    selectedList.value = []
    options.value.forEach((element: any) => {
        if (element.check) {
            //@ts-ignore
            selectedList.value.push(element)
        }
    });
    isShowList.value = false


}
function deleteSelect(value: any) {

    selectedList.value.forEach((element: any) => {
        if (element.value == value) {
            element.check = false
        }
    });
    let arrList = []
    options.value.forEach((element: any) => {
        if (element.check) {
            arrList.push(element)
        }
        //@ts-ignore
        selectedList.value = arrList
    });
    isShowList.value = false
}
// 比赛管理详情 编辑 发布 删除 结束
let isPublish = ref(false)
let isRemove = ref(false)
let isFinish = ref(false)
let detailVal = ref()
let publishVal = ref()
let removeVal = ref()
let finishVal = ref()
// 详情
function particulars(value: any) {
    console.log('value', value);
    detailVal.value = value
    isCreatMatch.value = true
    let seeFormate = {}
    MatchControlData.value.forEach(element => {
        if (element.Id == value.Id) {

            // formData.value.matchName = element.name,
            // formData.value.startTime = element.limitStartTime,
            // formData.value.endTime = element.limitEndTime,
            // formData.value.expertGroupLeader = element.matchProfessList,
            // formData.value.chiefUmpire = element.matchRefereeList,
            // formData.value.racer = element.matchUserList,
            // formData.value.sponsor = element.sponsor!,
            // formData.value.co_organizer = element.coorganizer!,
            // formData.value.supportingAgency = element.support!,
            // formData.value.technicalSupport = element.technical!,
            seeFormate = {
                matchName: element.name,
                startTime: element.limitStartTime,
                endTime: element.limitEndTime,
                expertGroupLeader: element.matchProfessList,
                chiefUmpire: element.matchRefereeList,
                racer: element.matchUserList,
                sponsor: element.sponsor!,
                co_organizer: element.coorganizer!,
                supportingAgency: element.support!,
                technicalSupport: element.technical!,
            }
        }
    });
    //@ts-ignore
    formData.value = seeFormate
    selectedList.value = newSelectList.value
}
// 编辑
function compile(value: any) { }
// 发布
function publish(value: any) {
    publishVal.value = value
    isPublish.value = true
    isMaskVisible.value = true
}
function publishConfirm() {
    // 提交数据到接口
    isPublish.value = false
    isMaskVisible.value = false
}
// 删除 
function remove(value: any) {
    removeVal.value = value
    isRemove.value = true
    isMaskVisible.value = true
}
function removeConfirm() {
    // 删除这一条数据
    isPublish.value = false
    isMaskVisible.value = false
}
// 结束
function finish(value: any) {
    finishVal.value = value
    isFinish.value = true
    isMaskVisible.value = true
}
function finishConfirm() {
    // 什么功能
    isPublish.value = false
    isMaskVisible.value = false
}
</script>
<style scoped>
/* 发布、删除、结束 */
.popTitle {
    position: absolute;
    left: 50%;
    transform: translate(-65%);
    top: 70px;
}

.popBtn {
    width: 420px;
    position: absolute;
    left: 50%;
    transform: translate(-50%);
    bottom: 130px;
    display: flex;
    justify-content: space-between;
}

/* 评分裁判 */
.selectIpt {
    width: 1355px;
    height: 48px;
    border: 1px solid;
    line-height: 48px;
    padding: 0 11px;
    border-radius: 2px;
    border-color: #d9d9d9;
}

.selectIptTrue {
    width: 1355px;
    height: 48px;
    border: 1px solid;
    line-height: 48px;
    padding: 0 11px;
    border-radius: 2px;
    border-color: #4080ff;
}

.selectIptFalse {
    width: 1355px;
    height: 48px;
    border: 1px solid;
    line-height: 48px;
    padding: 0 11px;
    border-radius: 2px;
    border-color: red;
}

.haveChosen {
    min-width: 96px;
    height: 32.64px;
    border-radius: 3.84px;
    background: #f7f8fa;
    border: 1px solid #ededed;
    line-height: 32.64px;
    font-size: 19px;
    margin-top: 6px;
    padding: 0 10px 0 15px;
    margin-right: 14px;
}

.haveChosen>span {
    margin-left: 15px;
    color: #4080ff;
}

.selectIptTrue>span {
    color: #bfbfbf;
}

.selectIptFalse>span {
    color: #bfbfbf;
}

.selectIpt>span {
    color: #bfbfbf;
}

.selectBox {
    background-color: pink;
    background-color: #ffffff;
    height: 400px;
    width: 1356px;
    position: absolute;
    z-index: 999;
    border: 1px solid #dfdfdf;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
}

.selectList {
    overflow-y: scroll;
    width: 1350px;
    height: 350px;
}

.ListBox {
    padding-left: 15px;
    margin-top: 15px;
}

.selectList::-webkit-scrollbar {
    width: 8.5px;
    height: 1px;
}

.selectList::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: #DFE1E8;
}

.selectBtn {
    width: 100%;
    height: 70px;
    border-top: 1px solid #d9d9d9;
}

.allSelect {
    outline: none;
    border: none;
    position: absolute;
    bottom: 10px;
    left: 3px;
    font-size: 18px;
}

.cancelSelect {
    outline: none;
    border: none;
    position: absolute;
    left: 71px;
    bottom: 10px;
    font-size: 18px;
}

.confirmSelect {
    outline: none;
    border: none;
    width: 84.4px;
    height: 33.5px;
    line-height: 26.5px;
    border-radius: 4.5px;
    background-color: #4080ff;
    margin-top: 7px;
    margin-right: 30px;
    float: right;
    color: #ffffff;
    font-size: 18px;
}

/* :deep().ant-btn:hover,
.ant-btn:focus,
.ant-btn:active {
    color: black;
    background-color: #ffffff;
} */

.confirmSelect:hover {
    color: #ffffff;
    background-color: #4080ff;
}

/* 评分裁判 */
/* 创建比赛确定返回 */
.confirmCreate {
    width: 128px;
    height: 44px;
    font-size: 20px;
    margin-right: 20px;
    margin-left: 1079px;
    background-color: #1890ff;
    color: #ffffff;
}

/* .confirmCreate:hover {
    color: #ffffff;
    background-color: #1890ff;
} */

.callBack {
    width: 128px;
    height: 44px;
    font-size: 20px;
}

.callBack:hover {
    color: #ffffff;
    background-color: #1890ff;
}

/* 创建比赛确定返回 */
.logout {
    width: 68px;
    height: 36px;
    line-height: 36px;
    background-color: #4e5969;
    color: #ffffff;
    position: absolute;
    top: 77px;
    right: 132px;
    font-size: 20px;
    text-align: center;
    border-radius: 5px;
}

.Box {
    width: 100%;
    height: 100%;
    background-color: #f5f5f5;
}

.Title {
    width: 1920px;
    height: 80px;
    line-height: 80px;
    font-size: 32px;
    background: rgba(255, 255, 255, 1);
    padding-left: 40px;
    padding-right: 21px;
    letter-spacing: 3px;
    display: flex;
    margin-bottom: 31px;
    box-shadow: 0px 6.03px 15.08px rgba(78, 89, 105, 0.06);
}

.judgeOperation {
    margin-left: auto;
    display: flex;
}

.judge {
    width: 54px;
    height: 54px;
    background-image: url('/public/images/裁判.png');
    background-size: cover;
    background-repeat: no-repeat;
    margin-top: 13px;
}

.judgeName {
    font-size: 24px;
    margin: 0 10px;
}

.content {
    width: 1855px;
    height: 100%;
    margin-left: 38px;
    overflow-y: scroll;
}

.content::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 6px;
    /*高宽分别对应横竖滚动条的尺寸*/
    height: 1px;
}

.content::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 10px;
    background: #edeff3;
}

.mainBody {
    width: 1840px;
    height: 100%;
    padding-bottom: 74px;
    display: flex;
}

.left {
    width: 228px;
    height: 941px;
    background-color: #ffffff;
    border-radius: 8px;
}

.right {
    width: 1612px;
    height: 941px;
    background-color: #ffffff;
    border-radius: 8px;
    margin-left: 20px;
    padding: 23px 20px;
}

.liBox {
    overflow: hidden;
    height: 265px;
    transition: 0.5s;
    margin-top: 6px;
}

.li {
    width: 207px;
    height: 53px;
    margin-left: 9px;
    font-size: 20px;
    line-height: 53px;
    padding-left: 48px;
}

.liBox2 {
    height: 0;
}

.titBox {
    font-size: 22px;
    /* background-color: pink; */
    width: 207px;
    height: 53px;
    margin-left: 13px;
    margin-top: 21px;
    line-height: 53px;
}

.titBox>span {
    margin-left: 15px;
    margin-right: 54px;
}

.titBox2 {
    color: #4080ff;
}

.liselect {
    color: #4080ff;
    background-color: #f2f3f5;
}

.matchConduct {
    display: flex;
    justify-content: space-between;
    margin-bottom: 18px;
}

.search {
    width: 433px;
    height: 48px;
    border-radius: 3px;
    background-color: #f2f3f5;
    display: flex;
}

.searchIpt {
    width: 385px;
    height: 48px;
    border: none;
    outline: none;
    padding: 0 10px;
    font-size: 20px;
    letter-spacing: 2px;
}

.searchBtn {
    width: 48px;
    height: 48px;
    border-radius: 3px;
}

.searchBtn>img {
    width: 24px;
    height: 24px;
    margin-top: 11.9px;
    margin-left: 11.9px;
}

.operationBtn {
    width: 120px;
    height: 44px;
    border-radius: 5px;
    margin-left: 7px;
    font-size: 20px;
}

.operationBtn:hover {
    color: #ffffff;
    background-color: #1890ff;
}

:deep().ant-table-wrapper {
    border: 1px solid #f7f7f7;
}

:deep().ant-table-thead>tr>th {
    text-align: center;
}

:deep().ant-table table {
    text-align: center;
}

:deep().ant-table-tbody>tr>td {
    border: none;
}

:deep().ant-table-thead>tr>th {
    border: none;
}

:deep().ant-table-thead>tr>th:not(:last-child):not(.ant-table-selection-column):not(.ant-table-row-expand-icon-cell):not([colspan])::before {
    width: 0px;
}

:deep().ant-table-pagination.ant-pagination {
    position: absolute;
    margin: 0;
    left: 50%;
    transform: translate(-50%);
    top: 790px;
}

:deep().ant-pagination-item-active a {
    color: #ffffff;
    background-color: #4080ff;
    width: 32px;
    height: 32px;
    border-radius: 2px;
}

:deep().ant-pagination-item-active {
    border: none;
    border-radius: 4px;
}

:deep().ant-pagination-options-quick-jumper input:focus,
.ant-pagination-options-quick-jumper input-focused {
    border-right-width: 0.00521rem;
    outline: 0;
    text-align: center;
    background-color: #4080ff;
    border-radius: 3px;
    color: #ffffff;
    width: 47px;
}

:deep().ant-pagination-options-quick-jumper input {
    width: 45px;
}

:deep().ant-pagination-options-quick-jumper input:focus,
.ant-pagination-options-quick-jumper input-focused {
    box-shadow: none;
}

.operationTd {
    width: 152px;
    height: 25px;
    display: flex;
    justify-content: space-around;
    margin: auto;
}

.operationTd>img {
    width: 22px;
    height: 22px;
    cursor: pointer;
}

.creatMatch {
    padding: 0px 69px 4.5px 26px;
}

h2 {
    font-size: 26px;
}

:deep().ant-form-item-label>label {
    font-size: 20px;
}

:deep().ant-input {
    height: 48px;
}

:deep().ant-form-item-label {
    line-height: 48px;
}

:deep().ant-picker {
    height: 48px;
}

:deep().ant-select:not(.ant-select-customize-input) .ant-select-selector {
    height: 48px;
}

:deep().ant-select-selection-placeholder {
    line-height: 48px !important;
}

#box {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, 1);
    opacity: 0.3;
    z-index: 100;
}

.PopBox {
    width: 944px;
    min-height: 437px;
    background-color: #ffffff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 10px;
    text-align: center;
    z-index: 999;
}

.PopBox>p {
    font-size: 32px;
    float: left;
    margin-top: 35px;
    margin-left: 43px;
}

.PopBox>.userName {
    font-size: 24px;
    margin-top: 144px;
}

.popIpt {
    width: 650px;
    height: 54px;
    outline: none;
    border: none;
    background-color: #f2f3f5;
    border-radius: 3px;
    margin-left: 17px;
    padding: 0 23px;
    font-size: 20px;
}

.setPassword {
    font-size: 24px;
    margin-top: 36px;
}

.ConfirmPassword {
    font-size: 24px;
    margin-top: 25px;
}

.btn {
    width: 412.5px;
    height: 65px;
    margin: auto;
    display: flex;
    justify-content: space-between;
    margin-top: 88px;
}

.btn2 {
    width: 412.5px;
    height: 65px;
    margin: auto;
    display: flex;
    justify-content: space-between;
    margin-top: 88px
}

.btn3 {
    width: 412.5px;
    height: 65px;
    margin: auto;
    display: flex;
    justify-content: space-between;
    margin-top: 72px
}

.cancelBtn {
    outline: none;
    border: none;
    background-color: #f2f3f5;
    width: 195px;
    border-radius: 6.75px;
    color: black;
    font-size: 29.9px;
}

.confirmBtn {
    outline: none;
    border: none;
    background-color: #4080ff;
    width: 195px;
    border-radius: 6.75px;
    color: #ffffff;
    font-size: 29.9px;
}

:deep().ant-popover-buttons {
    display: flex;
    justify-content: space-evenly;
}

:deep().ant-select-single .ant-select-selector .ant-select-selection-item {
    line-height: 48px;
}
</style>